<template>
    <div>
        <!-- 面包屑 -->
       <el-bread></el-bread>
        <el-button type="primary" plain class="btn" @click="add">添加</el-button>
        <list @edit="edit"></list>
        <dia-log ref="dialogRef" :isShow="isShow" :isAdd="isAdd" @cancel="cancel"></dia-log>
    </div>
</template>
<script>
// 引入弹窗
import Login from '@/pages/login.vue';
import diaLog from './dialog.vue'
// 引入表格
import list from './list.vue';
export default {
    data() {
        return {
            isShow: false,//弹窗状态值
            isAdd: true,//是否为添加 默认为添加
        }
    },
    methods: {
        // 添加按钮  打开弹窗
        add() {
            this.isShow = true

        },
        // 关闭弹窗
        cancel(tag) {
            this.isShow = tag
        },
        // 
        edit(id) {
            this.isShow = true;
            this.isAdd = false;
            // 调取子组件的数据回显方法
            this.$refs.dialogRef.roleinfo(id)
        }
    },
    mounted() {
        // console.log(this.$store);
        // 优化没有点击菜单管理在角色管理也可以获取到菜单管理的数据
        // 如果有数据就不请求  没有数组在请求
        if (this.$store.getters['menu/getMenuList'].length == 0) {
            this.$store.dispatch('menu/getMenuList')
        }
    },
    watch: {},
    computed: {},
    filters: {},
    components: {
        diaLog, list
    },
}
</script>
<style scoped>
.btn {
    margin: 20px 0 10px;
}
</style>